<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>

<div class="voc-tabs tabs-find">
	Here you can find a vocabulary that other users' created. If you are logged in, you can save them to your favorite lists and start exercising them.
	<p>
	<form:form id="searchForm" method="POST" action="/learnlang/vocabularyPage/vocListSearch" modelAttribute="searchVocabularyListInfo">
	<table>
	<tr><td>From language</td><td></td><td>To language</td><td>Tags, e.g. "x,y"</td><td>Words, e.g. "x,y"</td></tr>
	<tr><td>
		<form:select id="searchForm-fromLang" path="fromLang">
			<form:option value="" label="Any" />
			<form:options items="${searchVocabularyListInfo.getLangMap()}" />
		</form:select></td>
		<td><button class="search-voc-list-switch-languages"></button></td>
		<td>
		<form:select id="searchForm-toLang" path="toLang">
			<form:option value="" label="Any" />
			<form:options items="${searchVocabularyListInfo.getLangMap()}" />
		</form:select>
		<td><form:input id="searchForm-tags" maxlength="25" path="tags" type="text" value="${searchVocabularyListInfo.getTags()}"/></td>
		<td><form:input id="searchForm-words" maxlength="250" path="words" type="text" value="${searchVocabularyListInfo.getWords()}"/></td>
	</tr>
	</table>
	<input id="searchForm-submit" type="button" onclick="submitVocListSearch()" class="form-submit search-submit" value="Search"/>
	</form:form>
<c:if test="${not empty searchResList}">
<hr/>	
<table class="find-voc-lists">
	<colgroup>
	<col span="1" style="display:none"/>
	<col span="1" style="width:auto; white-space:nowrap;"/>
	<col span="1" style="width:1%; white-space:nowrap;"/>
	<col span="1" style="width:auto; white-space:nowrap;"/>
	<col span="1" style="width:1%; white-space:nowrap;"/>
	</colgroup>
		<tr><td colspan="4">
			<div class="pagination find-voc-pagination">
				<a href="#" class="first" data-action="first">&laquo;</a>
				<a href="#" class="previous" data-action="previous">&lsaquo;</a>
				<input type="text" readonly="readonly" data-current-page="${searchVocabularyListInfo.getPageIdx()}" data-max-page="${searchVocabularyListInfo.getPageMaxIdx()}"/>
				<a href="#" class="next" data-action="next">&rsaquo;</a>
				<a href="#" class="last" data-action="last">&raquo;</a>
			</div> <!-- pagination -->
		</td></tr>
		<tr>
			<th class="voc-list-col-0">hidden-rowid</th>
			<th class="voc-list-col-1">Name</th>
			<th class="voc-list-col-2">From-To Language</th>
			<th class="voc-list-col-3">Tags</th>
			<th class="voc-list-col-4">Actions</th>
		</tr>
	<c:forEach items="${searchResList}" var="vocList">
		<tr>
			<td class="voc-list-col-0">${vocList.getRowId()}</td>
			<td class="voc-list-col-1"><div><span><c:out value="${vocList.getName()}"/></span></div></td>
			<td class="voc-list-col-2"><c:out value="${vocList.getFromLangText()}"/>-<c:out value="${vocList.getToLangText()}"/></td>
			<td class="voc-list-col-3"><div><span><c:out value="${vocList.getTags()}"/></span></div></td>
			<td class="voc-list-col-4">
				<a class="find-voc-view" href="#"><span class="ui-icon ui-icon-folder-open"></span></a>&nbsp;
				<c:if test='${not loginOkay.equals("")}'>
					<form:form id="findVoc${vocList.getRowId()}" class="inline-form" action="/learnlang/vocabularyPage/favVocList?page=vocabularyPage&lnx=4&vid=${vocList.getRowId()}&uid=${userid}" method="POST">
						<a class="find-voc-favorite" onclick="document.forms.findVoc${vocList.getRowId()}.submit()" 
							title="Adds this vocabulary list to your favorites" href="#"><span class="ui-icon ui-icon-star"></span></a>
					</form:form>
				</c:if>
			</td>
		</tr>
	</c:forEach>
</table>
</c:if> <!-- search list is not empty -->
</div> <!-- search-vocabulary-list -->

